<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航条</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			/**
			 * 设置ul
			 */
			.nav{
				/*去除项目符号*/
				list-style: none;
				/*为ul设置背景颜色*/
				background-color: cornflowerblue;
				/*设置宽度
				* 在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
				*/
				width: 1000px;
				margin: 50px auto;
				/*解决高度塌陷*/
				overflow: hidden;
			}
			
			/**
			 * 设置li
			 */
			.nav li{
				float: left;
				width: 25%;
			}
			
			.nav a{
				/*a为内联元素，不能设置宽高，所以先将a转换为块元素*/
				display: block;
				width: 100%;
				/*设置文字居中*/
				text-align: center;
				padding: 5px 0;
				/*去除下换线*/
				text-decoration: none;
				color: white;
				font-weight: bold;
			}
			/**
			 * 设置鼠标移入效果
			 */
			.nav a:hover{
				background-color: #C00;
			}
		</style>
	</head>
	<body>
		<!--创建导航条结构-->
		<ul class="nav">
			<li><a href="#">首页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">联系</a></li>
			<li><a href="#">关于</a></li>
		</ul>
	</body>
</html>
